<head th:fragment="header">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>到家产品管理系统</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link rel="shortcut icon" href="favicon.ico">
	<link href="css/bootstrap.min.css?v=3.3.6"
		  th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
	<link href="/css/font-awesome.css?v=4.4.0"
		  th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
	<link href="/css/plugins/bootstrap-table/bootstrap-table.min.css"
		  th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}"
		  rel="stylesheet">
	<link href="/css/plugins/jsTree/style.min.css" rel="stylesheet">
	<link href="/css/plugins/bootstrap-select/bootstrap-select.css" rel="stylesheet">
	<link href="/css/plugins/jqTreeGrid/jquery.treegrid.css"
		  rel="stylesheet">
	<!--summernote css -->
	<link href="/css/plugins/summernote/summernote-0.8.8.css"
		  rel="stylesheet">
	<link href="css/animate.css" th:href="@{/css/animate.css}"
		  rel="stylesheet">
	<link href="/css/plugins/chosen/chosen.css" rel="stylesheet">
	<link href="/css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}"
		  rel="stylesheet">
	<link rel="stylesheet" href="/css/selectpage.css" type="text/css">
	<link rel="stylesheet" href="/js/layui-v2.6.6/layui/css/layui.css">
	<style>
		.required::after{
			content: "*";
			color: red;
			position: absolute;
			bottom: 1px;
		}
		#btnUpload{
			margin-top: 10px;
		}
		.layui-upload-file {
			display: none!important;
			opacity: .01;
			filter: Alpha(opacity=1);
		}
		.layui-table-cell{
			padding: 0 !important;
		}
		.mt2{
			margin: 0!important;
			padding-top: 10px!important;
			height: 100%!important;

		}
		.layui-table-view{
			height: calc(100% - 100px);
		}
		.layui-table-box{
			height: calc(100% - 40px);
			overflow: auto!important;
		}
		.layui-table-page{
			height: 40px!important;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 20px!important;
		}
		.layui-table-body{
			width: 100%;
		}

		div[lay-id="exampleTable"]>.layui-table-box>.layui-table-header {
			z-index: 2;
		}
		.layui-table-header{
			position: sticky;
			top: 0;
			z-index: 1;
		}

	/*	loading */
		.loading-container {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			z-index:-999;
		}

		.loading-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.5);
			z-index: 1000;
			display: none;
		}

		.loading-show .loading-overlay {
			display: block;
		}

		.loading-spinner {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 50px;
			height: 50px;
			border: 3px solid #f3f3f3;
			border-top: 3px solid #3498db;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			z-index: 1001;
			display: none;
		}

		.loading-show .loading-spinner {
			display: block;
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
	/*	SBlayui表格显示不对*/
		table>tbody>tr>td>div{
			display: flex !important;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}
		table>tbody>tr>td[colspan="12"]>div{
			display: block !important;
		}
		.layui-table-cell{
			min-height: 36px;
		}
		.layui-table-cell>span{
			white-space: nowrap; /* 自适应宽度*/overflow:hidden;text-overflow:ellipsis;
			margin-left: 2px;
		}
		table>tbody>tr>td>div>a{
			margin-right: 2px;
		}
		.layui-table-grid-down {
			display: none!important;
		}
		.myi{
			position: absolute; right: 30px;  top: 30%;
		}
		.myi:hover{
			cursor: pointer;
		}
	</style>
</head>
<div th:fragment="footer">
	<div id="loadingContainer" class="loading-container">
		<div class="loading-overlay"></div>
		<div class="loading-spinner"></div>
	</div>
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.6"></script>
	<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
	<script src="/js/plugins/bootstrap-select/bootstrap-select.js"></script>
	<script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="/js/plugins/validate/jquery.validate.extend.js"></script>
	<script src="/js/plugins/validate/messages_zh.min.js"></script>
	<script src="/js/plugins/jsTree/jstree.min.js"></script>
	<script src="/js/plugins/jqTreeGrid/jquery.treegrid.min.js"></script>
	<script src="/js/plugins/jqTreeGrid/jquery.treegrid.extension.js"></script>
	<script src="/js/plugins/jqTreeGrid/jquery.treegrid.bootstrap3.js"></script>
	<script src="/js/plugins/chosen/chosen.jquery.js"></script>
	<script src="/js/plugins/layer/layer.js"></script>
	<script src="/js/layui-v2.6.6/layui/layui.js"></script>
	<script src="/js/content.js?v=1.0.0"></script>
	<!--summernote-->
	<script src="/js/plugins/summernote/summernote.js"></script>
	<script src="/js/plugins/summernote/summernote-zh-CN.min.js"></script>
	<!--分页下拉框-->
	<script type="text/javascript" src="/js/selectpage.js" ></script>
	<script type="text/javascript" src="/js/jquery-form.js"></script>
	<script src="/js/plugins/echarts/echarts-all.js"></script>
	<script>
		function showLoading(){
			$('#loadingContainer').addClass('loading-show');
			$('#loadingContainer').css('z-index',0);
		}
		function hindLoading(){
			$('#loadingContainer').css('z-index',-999);
			$('#loadingContainer').removeClass('loading-show');
		}
		function restrictInput(event) {
			// 获取输入框元素
			var input = event.target;
			// 获取输入的值
			var inputValue = input.value;
			input.value = inputValue.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
		}

		var tip_index;
		/**
		 * 页面表格内容超出宽度显示...
		 * 鼠标放上去之后回显具体内容
		 * 移开鼠标内容消失
		 */
		function showAndHideMsg(){
			//.contains()
			$(document).on("mouseenter","td",function(){
				//去掉一些特殊的
				if($(this).find('input').length>0||$(this).find('a').length>0){
					return false
				}
				if(tip_index){
					layui.use('layer', function(layer) {
						layer.close(tip_index);
						tip_index=null;
					});
				}
				let text = $(this).text();
				const checkEllipsis = (box) => {
					const range = document.createRange();
					range.setStart(box, 0);
					range.setEnd(box, box.childNodes.length);
					window.getSelection().addRange(range);
					const rangeWidth = range.getBoundingClientRect().width; // 所有文字的宽度
					const rangeHeight = range.getBoundingClientRect().height; // 所有文字的高度
					// console.log(rangeWidth, rangeHeight);
					const getPadding = (el) => {
						const style = window.getComputedStyle(el, null);
						const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
						const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
						const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
						const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
						return {
							pLeft: paddingLeft,
							pRight: paddingRight,
							pTop: paddingTop,
							pBottom: paddingBottom,
						};
					}
					const { pLeft, pRight, pTop, pBottom } = getPadding(box);
					// console.log(pLeft, pRight, pTop, pBottom, "--");
					const horizontalPadding = pLeft + pRight;
					const verticalPadding = pTop + pBottom;
					if (
							rangeWidth + horizontalPadding > box.offsetWidth ||
							rangeHeight + verticalPadding > box.offsetHeight ||
							range.scrollWidth > box.offsetWidth
					) {
						window.getSelection().removeRange(range)
						// console.log("计算结果：存在省略号")
						return true
					} else {
						window.getSelection().removeRange(range)
						// console.log("计算结果：容器宽度足够，没有省略号了")
						return false
					}
				};


				// &&this.offsetWidth < this.scrollWidth
				if (text.trim()!='' && checkEllipsis($(this)[0])) {
					let that = this;
					let wid;

					if(text.length>1000){
						wid = '900px';
					}else if(text.length>600){
						wid = '700px';
					}else if(text.length>150){
						wid = '500px';
					}else if(text.length>100){
						wid = '250px';
					}else if(text.length>50){
						wid = '150px';
					}
					layui.use('layer', function(layer) {
						tip_index = layer.tips('<span style="word-wrap: break-word;">'+text+'</span>', that, {
							tips: [4, "#000000"],
							time: 0,
							area: [wid, 'auto']
						});
					});
				}
			});
			$(document).on("mouseout","td",function(){
				//判断是否有span
				if($(this).find('span').length==0){
					 if(tip_index) {
						layui.use('layer', function (layer) {
							layer.close(tip_index);
							tip_index=null
						});
					}
				}
			});
			$(document).on("mouseout","td>div",function(){
				//判断是否有span
				if($(this).find('span').length==0){
					if(tip_index) {
						layui.use('layer', function (layer) {
							layer.close(tip_index);
							tip_index=null
						});
					}
				}
			});
			$(document).on("mouseout","td>div>span",function(){
				if(tip_index){
					layui.use('layer', function(layer) {
						layer.close(tip_index);
						tip_index=null
					});
				}
			});
		}
		showAndHideMsg()
	</script>
</div>
